import SVGAccount from '@mdi/svg/svg/account-outline.svg';
import SVGCity from '@mdi/svg/svg/city-variant-outline.svg';
import SVGMail from '@mdi/svg/svg/email-outline.svg';
import SVGHome from '@mdi/svg/svg/home-outline.svg';
import SVGKey from '@mdi/svg/svg/key-outline.svg';
import SVGAddress from '@mdi/svg/svg/map-marker-outline.svg';
import SVGEdit from '@mdi/svg/svg/pencil-outline.svg';
import SVGPhone from '@mdi/svg/svg/phone-outline.svg';
import SVGOrgan from '@mdi/svg/svg/sitemap-outline.svg';
import { style } from '@vanilla-extract/css';
import { brighten, fallBackGlobalStyle } from '../../theme/tools';
import { vars } from '../../theme/vars.css';

export const inputBaseStyle = style({
	overflow: 'hidden',
	selectors: {
		'&:is([class^=icon-], [class*=" icon-"])': {
			position: 'relative',
			paddingLeft: '2.5em',
		},
		'&:is([class^=icon-], [class*=" icon-"]):before': {
			content: '',
			position: 'absolute',
			left: '0px',
			top: '0px',
			bottom: '0px',
			width: '3em',
			background: vars.color.text,
			maskPosition: 'center',
			maskRepeat: 'no-repeat',
			maskSize: '1.6em',
		},
		'&.icon-account:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGAccount}')`,
		},
		'&.icon-organ:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGOrgan}')`,
		},
		'&.icon-address:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGAddress}')`,
		},
		'&.icon-city:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGCity}')`,
		},
		'&.icon-key:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGKey}')`,
		},
		'&.icon-mail:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGMail}')`,
		},
		'&.icon-phone:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGPhone}')`,
		},
		'&.icon-home:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGHome}')`,
		},
		'&.icon-edit:before': {
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGEdit}')`,
		},
		'&[data-tips]': {
			backgroundColor: brighten('red', 0.4),
		},
	},
});

fallBackGlobalStyle(
	`${inputBaseStyle}[data-tips]`,
	{
		backgroundColor: '#f44',
	},
	{
		backgroundColor: '#a00',
	},
);
